<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>
  
  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 400;

  const ctx = cvs.getContext("2d");

  // 在x轴偏移的位置
  ctx.shadowOffsetX = 10;
  // 在y轴偏移的位置
  ctx.shadowOffsetY = 10;
  // 阴影颜色
  ctx.shadowColor = "red";
  // 模糊大小
  ctx.shadowBlur = 2;

  ctx.fillRect(50, 100, 100, 100);

  ctx.arc(250, 150, 30, 0, 2*Math.PI);
  ctx.fill();

  ctx.font = "50px 黑体";
  ctx.strokeText("千锋", 50, 300);
  
  ctx.font = "50px 黑体";
  ctx.fillText("千锋", 200, 300);
</script>
</html>